﻿

<link href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css" rel="stylesheet">
<link rel="stylesheet" href="/Content/layuiadmin/style/admin.css" media="all">
<div class="layui-fluid">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs10 layui-col-xs-offset1">
                <form class="layui-form" style="margin-right:60px;" lay-filter="form" onsubmit="return false">
                    <div class="layui-form-item">
                        <label class="layui-form-label">模板分类</label>
                        <div class="layui-input-block">
                            <div style="margin-right:3px;" class="layui-col-sm7 layui-col-xs7">
                                <input type="text" name="cate" readonly id="cate" required lay-verify="required" autocomplete="off" class="layui-input" />
                                <input type="hidden" name="ClassifyID" readonly id="ClassifyID" />
                            </div>
                            <div class="layui-col-sm1 layui-col-xs1">
                                <button class="layui-btn" id="demo1">
                                    选择分类
                                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">模板名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="tname" id="tname" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">模板描述</label>
                        <div class="layui-input-block">
                            <textarea name="describe" id="describe" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">模板图片</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="test1">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button> <br />
                            <input type="image" style="max-height:100px;" name="timg" id="timg" lay-verify="required" value="" />
                        </div>
                        @*<input style="height:100px;" type="image" id="img" value="" />*@
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">模板样式</label>
                        <div class="layui-input-block">
                            <input type="text" name="style" id="style" required lay-verify="required" placeholder="请输入样式" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">模版价格</label>
                        <div class="layui-input-block">
                            <input type="number" name="price" id="price" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">模版点赞数</label>
                        <div class="layui-input-block">
                            <input type="number" name="thumbsup" id="thumbsup" required lay-verify="required" placeholder="请输入点赞数" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn sub" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
<script>
    layui.config({
        base: '/Content/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'set']);
</script>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/dist/html5ImgCompress.min.js"></script>
<script src="~/Scripts/tools.js"></script>
<script>
    var data = {};

    //Demo
    $(function () {
        layui.use(function () {
            var form = layui.form;
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , url: '' //上传接口
                , auto: false//是否自动上传
                , bindAction: "#BTN"
                , size: 5120 //上传图片大小限制 KB
                , number: 1 //同时上传数量
                , accept: "images" //文件类型
                , acceptMime: 'image/*'//规定打开文件选择框时，筛选出的文件类型
                , choose: function (obj) {
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function (index, file, result) {
                        //console.log(index); //得到文件索引
                        console.log(file); //得到文件对象
                        //console.log(result); //得到文件base64编码，比如图片

                        new html5ImgCompress(file, {
                            before: function (file) {
                                console.log('压缩前...');
                                // 这里一般是对file进行filter，例如用file.type.indexOf('image') > -1来检验是否是图片
                                // 如果为非图片，则return false放弃压缩（不执行后续done、fail、complete），并相应提示
                                if (file.type.indexOf('image') == -1) {
                                    layer.msg("图片格式错误", { icon: 5, anim: 6 });
                                    return false;
                                }
                            },
                            done: function (file, base64) {
                                console.log('压缩成功...');
                                //console.log(base64);
                                data.Timg = base64;
                                $("#timg").attr("src", base64).val(base64);
                                $("#timg").click(function () {
                                    openimg(`${base64}`);
                                    return false;
                                })
                                // ajax和服务器通信上传base64图片等操作
                            },
                            fail: function (file) {
                                console.log('压缩失败...');
                            },
                            complete: function (file) {
                                console.log('压缩完成...');
                            },
                            notSupport: function (file) {
                                console.log('浏览器不支持！')
                                // 不支持操作，例如PC在这里可以采用swfupload上传
                            }
                        });

                        //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

                        //这里还可以做一些 append 文件列表 DOM 的操作

                        //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                        //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                    });

                }
                , done: function (res) {
                    //上传完毕回调
                }
                , error: function () {
                    //请求异常回调
                }
            });

            form.on('submit(form)', function () {
                // 验证均通过后的操作（如 Ajax 提交）

                if (data.Timg == undefined || data.Timg == "") {
                    console.log(data.Timg);
                    layer.msg("图片不能为空", { icon: 5, anim: 6 });
                    return false;
                }
                var index = layer.load(1, { shade: [0.6, "#fff"] });
                data.Tname = $("#tname").val();
                data.Describe = $("#describe").val();
                data.Style = $("#style").val();
                data.Price = $("#price").val();
                data.Thumbsup = $("#thumbsup").val();
                data.ClassifyID = $("#ClassifyID").val();
                //console.log(data); return false;
                $.post(apiurl + "api/Template/Add", data, function (res) {
                    console.log(res);
                    if (res.Code == 200) {
                        setTimeout(() => {
                            layer.close(index);
                            layer.msg("添加成功", { icon: 6, time: 1500 });
                            setTimeout(() => {
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.location.reload();
                            }, 600)
                        }, 300);
                    }
                    else {
                        layer.msg("添加失败", { icon: 5, anim: 6, time: 1500 });
                    }
                })
            });
            loadSelect();
            //执行实例
            //form.verify({
            //    tname: function (value, item) { //value：表单的值、item：表单的DOM对象
            //        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
            //            return '用户名不能有特殊字符';
            //        }
            //        if (/(^\_)|(\__)|(\_+$)/.test(value)) {
            //            return '用户名首尾不能出现下划线\'_\'';
            //        }
            //        if (/^\d+\d+\d$/.test(value)) {
            //            return '用户名不能全为数字';
            //        }

            //        //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
            //        if (value === 'xxx') {
            //            alert('用户名不能为敏感词');
            //            return true;
            //        }
            //    }

            //    //我们既支持上述函数式的方式，也支持下述数组的形式
            //    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            //    , pass: [
            //        /^[\S]{6,12}$/
            //        , '密码必须6到12位，且不能出现空格'
            //    ]
            //});

        });
    })

    function loadSelect() {
        $.get("http://localhost:62799/api/TemplateClassify/LevelClass", null, function (res) {

            if (res.Code == 200) {
                let classarray = [];
                let data = res.Data;
                let i = 0;
                data.forEach((e) => {
                    i++;
                    let detail = [];
                    e.ListTemplateClassify.forEach((t) => {
                        detail.push({
                            title: t.Cname
                            , id: t.ClassifyID
                        });
                    })
                    if (i >= data.length) {
                        classarray.push({
                            title: e.LevelName
                            , id: i
                            , child: detail
                        })
                    } else {
                        classarray.push({
                            title: e.LevelName
                            , id: i
                            , child: detail
                        }, { type: '-' });
                    }

                })
                var dropdown = layui.dropdown
                dropdown.render({
                    elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
                    , data: classarray
                    , id: 'demo1'
                    //菜单被点击的事件
                    , click: function (obj) {
                        $("#ClassifyID").val(obj.id);
                        $("#cate").val(obj.title);
                    }
                });
            }
        })

    }
</script>



